<template>
  <div :id="id" style="width: 100%; height: 300px"></div>
</template>
<script>
import resize from "@/utils/resize";
export default {
  mixins: [resize],
  data() {
    return {
      chart: null,
      chartOne: null,
    };
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  props: {
    id: {
      type: String,
      default: "",
    },
    classifyData: {
      type: Array,
      default: () => [],
    },
    negativeData: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    classifyData(val) {
      this.renderClassify();
    },
    negativeData(val) {
      this.renderNegative();
    },
  },
  mounted() {},
  methods: {
    renderClassify(total) {
      this.chart = this.$echarts.init(
        document.getElementById(this.id),
        "macarons"
      );
      let data = [];
      let count = 0;
      for (let i = 0; i < this.classifyData.length; i++) {
        count += this.classifyData[i].doc_count;
        data.push({
          name: this.classifyData[i].key,
          value: this.classifyData[i].doc_count,
        });
      }
      if (count < total) {
        data.push({
          name: "其他",
          value: total - count,
        });
      }
      if (data.length > 0) {
        this.isHaveChartNewsTwo = true;
      } else {
        this.isHaveChartNewsTwo = false;
      }
      this.chart.setOption({
        tooltip: {
          confine: true,
          show: true,
          // trigger: 'item',
          backgroundColor: "#fff",
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
          borderRadius: 0,
          padding: 5,
          textStyle: {
            fontWeight: "normal",
            color: "#000",
          },
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "74%",
          bottom: "20px",
          itemGap: 20,
          // itemWidth: 6,
          // itemHeight: 6,
          data: data,
          formatter: function (name) {
            return name.length > 20 ? name.slice(0, 8) + "..." : name;
          },
        },
        grid: {
          top: 10,
        },
        // color: Ecolors.color,
        series: [
          {
            type: "pie",
            name: "分类统计",
            radius: ["40%", "55%"],
            center: ["35%", "48%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                formatter: "{d}%",
              },
            },
            labelLine: {
              normal: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: "#fff",
              },
            },
            data: data,
          },
        ],
      });
    },
    renderNegative() {
      this.chartOne = this.$echarts.init(
        document.getElementById(this.id),
        "macarons"
      );
      let data = [];
      for (let i = 0; i < this.negativeData.length; i++) {
        data.push({
          name: this.negativeData[i].key,
          value: this.negativeData[i].doc_count,
        });
      }
      /* if(data.length>0){
                this.isHaveChartNewsThree = true
            }else{
                this.isHaveChartNewsThree = false
            } */
      this.chartOne.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "74%",
          top: "4%",
          itemGap: 24,
          // itemWidth: 6,
          // itemHeight: 6,
          data: data,
          formatter: function (name) {
            return name.length > 20 ? name.slice(0, 8) + "..." : name;
          },
        },
        grid: {
          top: 10,
        },
        series: [
          {
            type: "pie",
            name: "负面指数",
            radius: ["40%", "55%"],
            center: ["35%", "48%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                formatter: "{d}%",
              },
            },
            labelLine: {
              normal: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: "#fff",
              },
            },
            data: data,
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  font-weight: bold;
  padding-left: 20px;
  text-align: left;
  font-size: 14px;
  line-height: 50px;
  border-bottom: 1px solid #ddd;
}
</style>